<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>医院管理</el-breadcrumb-item>
      <el-breadcrumb-item>医院列表</el-breadcrumb-item>
    </el-breadcrumb>


    <!--添加模态框-->
    <div>
      <el-dialog title="添加医院信息" :visible.sync="addDialog" width="60%" @close="addClose">
        <div style="margin-top: -200px">
          <amap id="map01" @getAddress="addressInfo" @getLocation="mapInfo" ></amap>
        </div>

        <el-form ref="addForm" :model="hospital" label-width="80px" :rules="addRules" status-icon label-position="top" style="margin-top: -180px">
          <el-form-item label="医院名称" prop="hospitalName">
            <el-input placeholder="请输入医院名称" v-model="hospital.hospitalName"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="hospitalPhone">
            <el-input placeholder="请输入11位手机号" v-model="hospital.hospitalPhone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="hospitalEmail">
            <el-input placeholder="请输入邮箱地址xxx@xxx.com" v-model="hospital.hospitalEmail"></el-input>
          </el-form-item>
          <el-form-item label="详细地址" prop="hospitalAddress">
            <el-input placeholder="请输入医院地址" v-model="hospital.hospitalAddress"></el-input>
          </el-form-item>
          <el-form-item label="经度" prop="hospitalLongitude">
            <el-input placeholder="请输入地址经度" v-model="hospital.hospitalLongitude"></el-input>
          </el-form-item>
          <el-form-item label="纬度" prop="hospitalLatitude">
            <el-input placeholder="请输入地址纬度" v-model="hospital.hospitalLatitude"></el-input>
          </el-form-item>

          <el-form-item prop="openTime" label="开门时间">
            <el-time-select placeholder="起始时间" v-model="hospital.openTime"
                :picker-options="{
                  start: '08:00',
                  step: '00:30',
                  end: '18:30'
                }">
            </el-time-select>
          </el-form-item>
          <el-form-item prop="closeTime" label="关门时间">
            <el-time-select placeholder="结束时间" v-model="hospital.closeTime"
              :picker-options="{
                start: '08:30',
                step: '00:30',
                end: '24:00',
                minTime: hospital.openTime
              }">
            </el-time-select>
          </el-form-item>
          <el-form-item label="上传封面" >
            <el-input  type="hidden" v-model="hospital.hospitalCover" autocomplete="off"></el-input>
            <el-upload
                class="avatar-uploader"
                action="http://localhost:8081/hospital/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                name="cover">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="描述" prop="hospitalDescription">
            <el-input placeholder="请输入描述信息" v-model="hospital.hospitalDescription"></el-input>
          </el-form-item>
          <el-form-item label="显示状态" prop="hospitalStatus">
            <el-select v-model="hospital.hospitalStatus" placeholder="请选择显示状态">
              <el-option label="显示" value="1"></el-option>
              <el-option label="不显示" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作">
            <el-button type="primary" @click="addRule()">立即添加</el-button>
            <el-button @click="cancle">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <!--更新模态框-->
    <div>
      <el-dialog title="修改医院信息" :visible.sync="modifyDialog" width="60%" @close="modifyClose">
        <div >
          <bmap id="oo" @getAddress="addressInfo" @getLocation="mapInfo" style="margin-top: -200px"></bmap>
        </div>
        <el-form ref="modifyForm" :model="hospital" label-width="80px" :rules="modifyRules" status-icon label-position="top" style="margin-top: -180px">
          <el-form-item label="医院ID" v-if="false" >
            <el-input v-model="hospital.hospitalId"></el-input>
          </el-form-item>
          <el-form-item label="医院名称" prop="hospitalName">
            <el-input v-model="hospital.hospitalName"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="hospitalPhone">
            <el-input v-model="hospital.hospitalPhone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="hospitalEmail">
            <el-input v-model="hospital.hospitalEmail"></el-input>
          </el-form-item>
          <el-form-item label="详细地址" prop="hospitalAddress">
            <el-input v-model="hospital.hospitalAddress"></el-input>
          </el-form-item>
          <el-form-item label="经度" prop="hospitalLongitude">
            <el-input v-model="hospital.hospitalLongitude"></el-input>
          </el-form-item>
          <el-form-item label="纬度" prop="hospitalLatitude">
            <el-input v-model="hospital.hospitalLatitude"></el-input>
          </el-form-item>
          <el-form-item prop="openTime" label="开门时间">
            <el-time-select v-model="hospital.openTime"
                            :picker-options="{
                  start: '08:00',
                  step: '00:30',
                  end: '18:30'
                }">
            </el-time-select>
          </el-form-item>
          <el-form-item prop="closeTime" label="关门时间">
            <el-time-select v-model="hospital.closeTime"
                            :picker-options="{
                start: '08:30',
                step: '00:30',
                end: '24:00',
                minTime: hospital.openTime
              }">
            </el-time-select>
          </el-form-item>
          <el-form-item label="上传封面" >
            <el-input  type="hidden" v-model="hospital.hospitalCover" autocomplete="off"></el-input>
            <el-upload
                class="avatar-uploader"
                action="http://localhost:8081/hospital/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                name="cover">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="描述" prop="hospitalDescription">
            <el-input v-model="hospital.hospitalDescription"></el-input>
          </el-form-item>
          <el-form-item label="显示状态" prop="hospitalStatus">
            <el-select v-model="hospital.hospitalStatus" placeholder="请选择显示状态">
              <el-option label="显示" :value="1"></el-option>
              <el-option label="不显示" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="modifyRule()">立即更新</el-button>
            <el-button @click="cancle">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <!--    主体-->
    <el-container style="width: 100%;background: white">
      <!--顶部操作栏-->
      <el-header>
        <div style="width: 500px;background: olivedrab">
          <div style="margin-top: 15px;width: 300px;float:left;">
            <el-input placeholder="请输入医院名称" v-model="hospitalName" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>
          </div>
          <div style="float: right;margin-top: 15px">
            <el-button type="primary" plain @click="addDialog = true">添加医院</el-button>
          </div>
        </div>
      </el-header>
      <!--主体列表-->
      <el-main>
        <div>
          <template>
            <el-table :data="hospitalList" stripe style="width: 100%" border
                      :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
              <el-table-column style="margin: 0 auto; width: auto" type="index"
                               label="序号"></el-table-column>

              <el-table-column style="margin: 0 auto; width: auto" prop="hospitalId" v-if="false"
                               label="序号"></el-table-column>
              <el-table-column style="margin: 0 auto; width: auto" prop="hospitalName"
                               label="医院名称"></el-table-column>
              <el-table-column style="margin: 0 auto; width: auto" prop="hospitalPhone"
                               label="手机号"></el-table-column>
              <el-table-column style="margin: 0 auto; width: auto" prop="hospitalEmail"
                               label="邮箱"></el-table-column>
              <el-table-column style="margin: 0 auto; width: auto" prop="hospitalAddress"
                               label="详细地址"></el-table-column>
              <el-table-column style="margin: 0 auto; width: auto" prop="openTime"
                               label="开门时间"></el-table-column>
              <el-table-column style="margin: 0 auto; width: auto" prop="closeTime"
                               label="关门时间"></el-table-column>
              <el-table-column style="margin: 0 auto; width: auto" prop="hospitalStatus"
                               label="显示状态">
                <template slot-scope="sc">{{sc.row.hospitalStatus==1?'显示':'不显示'}}</template>
              </el-table-column>
              <el-table-column label="操作" style="width: auto">
                <template slot-scope="scope">
                  <el-button
                      size="mini"
                      @click="toModify(scope.row)">编辑
                  </el-button>
                  <el-button
                      size="mini"
                      type="danger"
                      @click="remove(scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </el-main>
      <!--分页-->
      <el-footer>
        <div class="block">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[3, 4, 5, 6]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-footer>
    </el-container>

  </div>
</template>

<script>



import AMap from "@/components/AMap";
import BMap from "@/components/BMap";
export default {
  name: "Hospital",
  components: {
    "amap":AMap,
    "bmap":BMap,
  },
  data() {
    return{
      hospitalName: "",
      hospitalList: [],
      pageNum: 1,
      pageSize: 3,
      total: 0,
      addDialog: false,
      modifyDialog: false,
      hospital: {
        hospitalAddress: "",
        hospitalLongitude: "",
        hospitalLatitude: ""
      },//添加时的医院对象
      imageUrl:'',
      addRules: {
        hospitalName: [
          {required: true, message: '请输入医院名称', trigger: 'blur'},
          {min: 1, max: 30, message: '长度在1到30个字符之间', trigger: 'blur'}
        ],
        hospitalPhone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {min: 11, max: 11, message: '11位数字', trigger: 'blur'}
        ],
        hospitalAddress: [
          {required: true, message: '请输入医院详细地址', trigger: 'blur'},
          {min: 1, max: 55, message: '长度在1到55个字符之间', trigger: 'blur'}
        ],
        openTime: [
          {required: true, message: '请输入医院开门时间', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在1到30个字符之间', trigger: 'blur'}
        ],
        closeTime: [
          {required: true, message: '请输入医院关门时间', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在1到30个字符之间', trigger: 'blur'}
        ],
        hospitalCover: [
          {required: true, message: '请输入医院封面', trigger: 'blur'},
          {min: 1, max: 30, message: '长度在1到30个字符之间', trigger: 'blur'}
        ],
        hospitalDescription: [
          {required: false, message: '请输入医院描述', trigger: 'blur'},
          {min: 1, max: 800, message: '长度在1到800个字符之间', trigger: 'blur'}
        ]
      },
      modifyRules: {
        hospitalName: [
          {required: true, message: '请输入医院名称', trigger: 'blur'},
          {min: 1, max: 30, message: '长度在1到30个字符之间', trigger: 'blur'}
        ],
        hospitalPhone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {min: 11, max: 11, message: '11位数字', trigger: 'blur'}
        ],
        hospitalAddress: [
          {required: true, message: '请输入医院详细地址', trigger: 'blur'},
          {min: 1, max: 55, message: '长度在1到55个字符之间', trigger: 'blur'}
        ],
        openTime: [
          {required: true, message: '请输入医院开门时间', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在1到30个字符之间', trigger: 'blur'}
        ],
        closeTime: [
          {required: true, message: '请输入医院关门时间', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在1到30个字符之间', trigger: 'blur'}
        ],
        hospitalCover: [
          {required: true, message: '请输入医院封面', trigger: 'blur'},
          {min: 1, max: 30, message: '长度在1到30个字符之间', trigger: 'blur'}
        ],
        hospitalDescription: [
          {required: false, message: '请输入医院描述', trigger: 'blur'},
          {min: 1, max: 800, message: '长度在1到800个字符之间', trigger: 'blur'}
        ]
      }

    }
  },
  // watch: {
  //   'hospital.hospitalAddress' () {
  //     alert(this.hospital.hospitalAddress)
  //   }
  // },
  created() {
    this.search()
    let url = this.$baseUrl + "/hospital/list"
    this.axios.get(url).then((res) => {
      this.hospitalList = res.data.data
    })
  },
  methods: {
    //处理图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(res)
      console.log(this.imageUrl)
      this.hospital.hospitalCover = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //查询医院地址
    addressInfo(data){
      console.log(11111111)
      this.hospital.hospitalAddress=data
    },
    //查询医院经纬
    mapInfo(data){
      this.hospital.hospitalLongitude=data[0][0]
      this.hospital.hospitalLatitude=data[0][1]
    },

    //查询
    search() {
      let url = this.$baseUrl + "/hospital/list"
      this.axios.get(url, {
        params: {
          hospitalName: this.hospitalName,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      }).then((res) => {
        this.hospitalList = res.data.data.list
        this.pageSize = res.data.data.pageSize
        this.pageNum = res.data.data.pageNum
        this.total = res.data.data.total

      })
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val
      this.search()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.search()
    },
    //添加
    add() {

      let url = this.$baseUrl + "/hospital/add"
      this.axios.post(url, JSON.stringify(this.hospital)).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("添加成功")
          Object.keys(this.hospital).forEach(key => (this.hospital[key] = ''))
          this.search()
          this.cancle()
        } else {
          this.$message.error("添加失败")
        }
      })
    },
    //更新前回显数据
    toModify(row) {
      Object.keys(this.hospital).forEach(key => (this.hospital[key] = ''))
      let hospitalId = row.hospitalId
      let url = this.$baseUrl + "/hospital/toModify"
      this.axios.get(url, {
        params: {
          hospitalId: hospitalId
        }
      }).then((res) => {
        this.modifyDialog = true
        this.hospital = res.data.data
        // this.hospital.hospitalStatus=1?"显示":"不显示"
      })

    },
    //修改
    modify() {

      let url = this.$baseUrl + "/hospital/modify"

      this.axios.put(url, JSON.stringify(this.hospital)).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message.success("更新成功")
          Object.keys(this.hospital).forEach(key => (this.hospital[key] = ''))
          this.modifyDialog = false;
          this.search()
        } else {
          this.$message.error("更新失败")
        }
      })
    },
    //关闭模态框
    cancle() {
      Object.keys(this.hospital).forEach(key => (this.hospital[key] = ''))
      this.imageUrl = null
      this.addDialog = false
      this.modifyDialog = false
    },
    addClose(){
      this.imageUrl = null
      Object.keys(this.hospital).forEach(key => (this.hospital[key] = ''))
      this.addDialog = false
      this.modifyDialog = false
    },
    modifyClose(){
      this.imageUrl = null
      Object.keys(this.hospital).forEach(key => (this.hospital[key] = ''))
      this.addDialog = false
      this.modifyDialog = false
    },
    addRule(){
      this.$refs.addForm.validate((valid)=>{
        if(valid){
          this.add()
        }else {
          return ;
        }
      })
    },
    modifyRule(){
      this.$refs.modifyForm.validate((valid)=>{
        if(valid){
          this.modify()
        }else {
          return ;
        }
      })
    },
    //删除
    remove(row) {
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let hospitalId = row.hospitalId
        let url = this.$baseUrl + "/hospital/remove/" + hospitalId
        this.axios.delete(url).then((res) => {
          if (res.data.code == 200) {
            this.$message.success("删除成功")
            this.search()
          } else {
            this.$message.error("删除失败")
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }

  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>